<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:100px; height:30px;margin-bottom:20px; background:red; font-size:14px; border:2px solid #000;}
.opa{filter:alpha(opacity:30);opacity:0.3}
</style>
<script>

window.onload=function(){
	var divs=document.getElementsByTagName('div');
	for(var i=0;i<divs.length;i++){
		divs[i].timer=null;
		divs[0].onmouseover=function(){
			startMove(divs[0],300,'width')
		};	
		divs[0].onmouseout=function(){
			startMove(divs[0],100,'width')
		};	
		divs[1].onmouseover=function(){
			startMove(divs[1],100,'height')
		};	
		divs[1].onmouseout=function(){
			startMove(divs[1],30,'height')
		};	
		divs[2].onmouseover=function(){
			startMove(divs[2],60,'font-size')
		};	
		divs[2].onmouseout=function(){
			startMove(divs[2],14,'font-size')
		};	
		divs[3].onmouseover=function(){
			startMove(divs[3],100,'opacity')
		};	
		divs[3].onmouseout=function(){
			startMove(divs[3],30,'opacity')
		};	
	};	
};
function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle;	
	}else{
		return getComputedStyle(obj,false)[attr];		
	};
};
function startMove(obj,target,attr){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var iCur=0;
		if(attr=='opacity'){
			iCur=parseInt(parseFloat(getStyle(obj,attr)*100));
			
			//**疑问： 下面两者并没区别
//			alert(parseInt(parseFloat(getStyle(obj,attr)*100)));
//			alert(parseInt(getStyle(obj,attr)*100));
//			alert(iCur)
		}else{
			iCur=parseInt(getStyle(obj,attr))	
		};
		var speed=(target-iCur)/8;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		if(iCur==target){
			clearInterval(obj.timer);
		}else{
			obj.style[attr]=iCur+speed+'px';
			if(attr=='opacity'){
				obj.style.opacity=(iCur+speed)/100;
				obj.style.filter='alpha(opacity:'+(iCur+speed)+')';	
			};	
		};	
	},30)	
}
</script>
</head>

<body>
<div></div>
<div></div>
<div>fdsdfds</div>
<div class="opa">fdsdfds</div>
</body>
</html>
